/**
 * 锚点配置示例文件
 * 这个文件展示了如何为不同类型的网站配置锚点选择器
 */

import type { SiteConfig } from '../config/site-config'

/**
 * 医疗网站配置示例
 */
export const medicalSiteExamples: SiteConfig[] = [
    // 好大夫在线
    {
        pattern: '*://*.haodf.com/*',
        anchor: '.g-bd',
        name: '好大夫在线',
        enabled: true
    },

    // 丁香园
    {
        pattern: '*://*.dxy.cn/*',
        anchor: '.main-content',
        name: '丁香园',
        enabled: true
    },

    // 春雨医生
    {
        pattern: '*://*.chunyuyisheng.com/*',
        anchor: '#main',
        name: '春雨医生',
        enabled: true
    },

    // 微医
    {
        pattern: '*://*.guahao.com/*',
        anchor: '.container',
        name: '微医',
        enabled: true
    }
]

/**
 * 医院官网配置示例
 */
export const hospitalSiteExamples: SiteConfig[] = [
    // 协和医院
    {
        pattern: '*://*.pumch.cn/*',
        anchor: '.main-content',
        name: '协和医院',
        enabled: true
    },

    // 301医院
    {
        pattern: '*://*.301hospital.com.cn/*',
        anchor: '#content',
        name: '301医院',
        enabled: true
    },

    // 华西医院
    {
        pattern: '*://*.cd120.com/*',
        anchor: '.layout-content',
        name: '华西医院',
        enabled: true
    }
]

/**
 * 通用网站配置示例
 */
export const commonSiteExamples: SiteConfig[] = [
    // GitHub
    {
        pattern: '*://*.github.com/*',
        anchor: 'main',
        name: 'GitHub',
        enabled: false // 在GitHub上禁用
    },

    // 百度
    {
        pattern: '*://*.baidu.com/*',
        anchor: '#content_left',
        name: '百度搜索',
        enabled: true
    },

    // 知乎
    {
        pattern: '*://*.zhihu.com/*',
        anchor: '.App-main',
        name: '知乎',
        enabled: true
    }
]

/**
 * 如何使用这些配置的说明
 */
export const usageInstructions = {
    /**
     * 步骤1: 复制需要的配置到 site-config.ts
     *
     * 从上面的示例中选择你需要的配置，复制到 config/site-config.ts 文件的 SITE_CONFIGS 数组中。
     *
     * 例如：
     * ```typescript
     * export const SITE_CONFIGS: SiteConfig[] = [
     *     ...medicalSiteExamples,  // 添加所有医疗网站配置
     *     ...hospitalSiteExamples, // 添加所有医院配置
     *     // 或者只添加特定的配置
     *     {
     *         pattern: '*://*.haodf.com/*',
     *         anchor: '.g-bd',
     *         name: '好大夫在线',
     *         enabled: true
     *     },
     *     // 默认配置（保持在最后）
     *     {
     *         pattern: '<all_urls>',
     *         anchor: 'body',
     *         name: '默认配置',
     *         enabled: true
     *     }
     * ]
     * ```
     */
    step1: 'Copy configurations to site-config.ts',

    /**
     * 步骤2: 测试配置是否生效
     *
     * 1. 重新加载扩展
     * 2. 访问配置的网站
     * 3. 在控制台运行 debugAnchor() 查看是否使用了正确的锚点
     * 4. 如果位置不对，调整 anchor 选择器
     */
    step2: 'Test and debug configurations',

    /**
     * 步骤3: 优化锚点选择器
     *
     * 如果扩展显示位置不理想，可以：
     * 1. 使用浏览器开发者工具检查页面结构
     * 2. 找到合适的容器元素
     * 3. 复制其 CSS 选择器
     * 4. 在控制台用 testAnchor('your-selector') 测试
     * 5. 更新配置文件
     */
    step3: 'Optimize anchor selectors'
}

/**
 * 常用的锚点选择器模式
 */
export const commonAnchorPatterns = {
    // 主内容区域
    mainContent: ['.main-content', '#main-content', '.content', '#content', 'main', '#main'],

    // 容器元素
    containers: ['.container', '#container', '.wrapper', '#wrapper', '.layout', '.page-content'],

    // 页面布局
    layouts: ['.layout-main', '.page-main', '.site-main', '.app-main', '.main-wrapper'],

    // 内容区域
    contentAreas: ['.content-area', '.content-wrapper', '.page-content', '.article-content', '.post-content']
}

/**
 * 调试技巧
 */
export const debugTips = {
    /**
     * 在控制台快速测试多个选择器
     */
    testMultipleSelectors: (selectors: string[]) => {
        console.group('🧪 Testing Multiple Selectors')
        selectors.forEach((selector) => {
            const element = document.querySelector(selector)
            const exists = element !== null
            console.log(`${exists ? '✅' : '❌'} ${selector}`, element)
        })
        console.groupEnd()
    },

    /**
     * 找到页面中最大的容器元素
     */
    findLargestContainer: () => {
        const elements = Array.from(document.querySelectorAll('div, main, section, article'))
        const sorted = elements.sort((a, b) => {
            const aArea = a.clientWidth * a.clientHeight
            const bArea = b.clientWidth * b.clientHeight
            return bArea - aArea
        })

        console.group('📐 Largest Container Elements')
        sorted.slice(0, 10).forEach((el, index) => {
            const rect = el.getBoundingClientRect()
            const selector = el.id ? `#${el.id}` : el.className ? `.${el.className.split(' ')[0]}` : el.tagName.toLowerCase()
            console.log(`${index + 1}. ${selector}`, {
                element: el,
                size: `${Math.round(rect.width)}x${Math.round(rect.height)}`,
                area: Math.round(rect.width * rect.height)
            })
        })
        console.groupEnd()

        return sorted[0]
    }
}

// 在开发环境下，将调试工具添加到全局对象
if (typeof window !== 'undefined' && process.env.NODE_ENV === 'development') {
    // 将调试方法分别挂载到window对象，方便在控制台直接调用
    ;(window as any).testMultipleSelectors = debugTips.testMultipleSelectors
    ;(window as any).findLargestContainer = debugTips.findLargestContainer
}
